<template>
    <div>
         <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" label="编号" width="60" />
    <el-table-column prop="name" label="用户名" />
    <el-table-column prop="roleNames" label="角色"  />
    <el-table-column v-slot="scoped" prop="sex" label="性别">
        <span v-if="scoped.row.sex==true">男</span>
        <span v-else>女</span>
    </el-table-column>
    <el-table-column prop="province" label="所在省份"  />
    <el-table-column prop="city" label="所在市"  />
    <el-table-column prop="county" label="所在县" />
    <el-table-column v-slot="scoped" prop="address" label="地址详情"width="150">
        {{ scoped.row.address.substring(0,5)+"..."}}
        </el-table-column>
       <el-table-column prop="createUser" label="创建人" />
          <el-table-column v-slot="scoped"  prop="createTime" label="创建时间" width="120">
            {{ scoped.row.createTime.substring(0,10)}}
            </el-table-column>
             <el-table-column prop="updateUser" label="修改人" />
                <el-table-column v-slot="scoped"  prop="updateTime" label="修改时间" width="120">
                      {{ scoped.row.updateTime? scoped.row.updateTime.substring(0,10):null }}
            </el-table-column>
                 <el-table-column v-slot="scoped" prop="" label="操作" width="150px">
                     <el-button type="primary" size="small" @click="upd(scoped.row.userId)">
          修改
        </el-button>
        <el-button  type="danger" @click="del(scoped.row.userId)" size="small">删除</el-button>
                    </el-table-column>

  </el-table>
   <el-pagination
      v-model:current-page="form.PageIndex"
      v-model:page-size="form.PageSize"
      :page-sizes="[15, 20, 25, 30]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.TotalCount"
     
    />
    </div>
</template>
<script setup lang="ts">
import { ref,reactive, onMounted ,watch} from 'vue';
import {axios} from '@/axios/axiosHelp'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = reactive({
    TotalCount: 0,
    PageCount: 0,
    PageSize: 15,
    PageIndex:1,
})
const tableData:any = ref([]);
const getuser = () => {
    axios.get("https://localhost:7081/api/User/GetUser", {
        params:form
    }).then((res) => {
        tableData.value = res.data.items
        form.TotalCount = res.data.totalCount
        form.PageCount=res.data.pageCount
    })
}
const del = (id:any) => {
    ElMessageBox.confirm(
    '是否确认删除?',
    '提示',
        {
            confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  ).then(() => {
            axios.post("https://localhost:7181/api/User/DelUser", {userId:id}).then((res) => {
        if (res.data.code==100) {
            ElMessage.success(res.data.msg)
            getuser();
        } else {
            ElMessage.error(res.data.msg)
        }
    })
    })
}
const upd = (id:any) => {
    router.push({
        name: 'Update',
        query: { id: id }
    })
    
}

watch(form,()=>{
    getuser()
})
onMounted(() => {
    getuser();
})
</script>

<style scoped>

</style>